<template>
  <div class="monitoring">
    <el-form ref="form" :model="form" label-width="40px">
      <el-form-item label="姓名" style="width: 125px;">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机" style="width: 135px;">
        <el-input
          v-model="form.mobile"
          placeholder="请输入手机号"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="分组" style="width: 168px;">
        <el-select
          v-model="form.groupingValue"
          placeholder="请选择分组"
          @change="groupingChange"
          popper-class="group"
        >
          <el-option
            v-for="(item,index) in groupingList"
            :value="item.CLIENT_NO"
            :label="item.CLIENT_NAME"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="状态" style="width: 110px">
        <el-select v-model="form.statusValue" placeholder="请选择状态">
          <el-option
            v-for="(item,index) in statusOptions"
            :value="item.value"
            :label="item.label"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="类型" style="width: 120px">
        <el-select v-model="form.typeValue" placeholder="请选择类型">
          <el-option v-for="item in typeOptions" :value="item" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <div class="people_number">
        在线人员:
        <span>{{statusNums.onlines}}</span>位
      </div>
      <div class="people_number">
        人员位数:
        <span>{{originalData.length}}</span>位
      </div>
      <el-button type="primary" @click="query" style="padding-left: 4px;">查 询</el-button>
      <el-form-item label="尾迹" style="width: 110px; margin-right: 10px">
        <el-select v-model="wakeValue" placeholder="尾迹">
          <el-option value="显示"></el-option>
          <el-option value="隐藏"></el-option>
        </el-select>
      </el-form-item>
      <el-button
        class="iconfont icon-kaishi"
        type="success"
        @click="startTracking"
        :disabled="disabled1"
      >开始跟踪</el-button>
      <el-button
        class="iconfont icon-tingzhi"
        type="danger"
        @click="cancelTracking"
        :disabled="disabled2"
      >取消跟踪</el-button>
      <el-button
        class="iconfont icon-daochu"
        style="background-color: #1f7246; color: #fff; border: 0 none;"
        @click="exportExcel"
      >导出Excel</el-button>
      <el-button class="iconfont icon-tongji" type="primary" @click="onlineStatistics">实时在线统计</el-button>
      <!-- 自动刷新 -->
      <div class="switch">
        <span>自动刷新</span>
        <el-switch
          v-model="switch_value"
          active-color="#13ce66"
          inactive-color="#ccc"
          @change="switchChange"
        ></el-switch>
        <el-select
          v-model="time_value"
          placeholder="间隔时间"
          v-if="switch_value"
          @change="selectChange"
        >
          <el-option
            v-for="item in time_Interval"
            :value="item.value"
            :label="item.label"
            :key="item.value"
          ></el-option>
        </el-select>
      </div>
    </el-form>
    <!-- 人员信息列表 -->
    <div class="table_list">
      <!-- <div class="table_list_box"> -->
      <el-table
        :data="screeningData"
        style="width: 100%"
        size="mini"
        border
        fit
        highlight-current-row
        @row-contextmenu="rowHandle"
        @row-click="clickRow"
        @row-dblclick="dblClickRow"
        @cell-mouse-enter="cellMouseEnter"
      >
        <el-table-column sortable prop="VID" label="人员编号" align="center" width="120"></el-table-column>
        <el-table-column sortable prop="CLIENT_NO" label="班组编号" align="center" width="120"></el-table-column>
        <el-table-column prop="CLIENT_NAME" label="班组" align="center"></el-table-column>
        <el-table-column prop="NAME" label="姓名" align="center"></el-table-column>
        <el-table-column sortable prop="PHONE" label="电话" align="center" width="115"></el-table-column>
        <el-table-column sortable prop="BIRTHDAY" label="生日" align="center" width="160"></el-table-column>
        <el-table-column prop="SEX" label="性别" align="center"></el-table-column>
        <el-table-column prop="WORKTYPE" label="工种" align="center"></el-table-column>
        <el-table-column sortable prop="WORKDATE" label="入职时间" align="center" width="160"></el-table-column>
        <el-table-column sortable prop="ORIENTATION_TIME" label="最终定位时间" align="center" width="170"></el-table-column>
        <el-table-column prop="LONGITUDE" label="经度" align="center"></el-table-column>
        <el-table-column prop="LATITUDE" label="纬度" align="center"></el-table-column>
        <el-table-column prop="HEARTBEAT" label="心跳" align="center"></el-table-column>
        <el-table-column prop="ONLINE" label="状态" align="center" :formatter="formatter"></el-table-column>
        <el-table-column sortable prop="SIMCARD_NO" label="通讯卡号" align="center" width="120"></el-table-column>
        <el-table-column sortable prop="ATTENDTIME" label="打卡状态" align="center" width="120"></el-table-column>
      </el-table>
    </div>
    <!-- 右键人员列表菜单 -->
    <div
      class="row_box"
      v-if="MouseEvent.isShow"
      :style="`left: ${MouseEvent.left}px; top: ${MouseEvent.top}px;`"
    >
      <span @click="exportRowExcel">导出Excel</span>
      <span @click="groupArea(teamNumber)">班组负责区域</span>
      <span @click="clearArea(teamNumber)">清扫队负责区域</span>
      <span>个人负责区域</span>
      <span @click="cleanArea">清除区域</span>
      <span @click="trajectory">轨迹回放</span>
    </div>
    <!-- 实时在线统计 -->
    <div class="statistical" v-if="Visible">
      <div class="title">
        <i class="iconfont icon-tongji1" />
        <h3>实时在线统计</h3>
        <span class="iconfont icon-guanbi close" @click="close" />
      </div>
      <div class="statistical_content">
        <el-table :data="statisticalData" style="width: 100%" stripe border>
          <el-table-column prop="名称" label="区域" align="center"></el-table-column>
          <el-table-column prop="名称" label="区域" align="center"></el-table-column>
          <el-table-column prop="在线人数" label="在线人数(作业)" align="center"></el-table-column>
          <el-table-column prop="全部人数" label="全部人数" align="center"></el-table-column>
        </el-table>
      </div>
      <div
        class="statistical_time"
      >统计时间：{{new Date().toLocaleDateString() + ' - ' + new Date().toTimeString().split(' ')[0]}}</div>
    </div>
  </div>
</template>

<script>
import eventBus from '@/eventBus.js'

import export2Excel from '@/utils/exportExcel/index.js'
// 转换地图坐标
// import { getLatLng } from '@/assets/js/pointtransfertools.js'

// import { BMap } from 'vue-baidu-map'
// import BaiduMap from 'vue-baidu-map/components/map/Map.vue'

export default {
  data () {
    return {
      account: '',
      // 筛选条件
      form: {
        name: '',
        mobile: '',
        groupingValue: '0000004',
        statusValue: '在线',
        typeValue: '全部'
      },
      // 原始数据
      originalData: [],
      // 类型列表
      typeOptions: ['全部', '班组长', '环卫工'],
      // 状态列表
      statusOptions: [
        { value: '全部', label: '全部' },
        { value: 1, label: '在线' },
        { value: 0, label: '离线' }
      ],
      tableData: [],
      statusNums: {
        onlines: 0,
        outlines: 0
      },
      person_data: [],
      switch_value: false,
      time_value: '',
      time_Interval: [{
        value: 10000,
        label: '10秒'
      }, {
        value: 30000,
        label: '30秒'
      }, {
        value: 60000,
        label: '1分钟'
      }],
      groupingList: [],
      wakeValue: '',
      // 筛选数据
      screeningData: [],
      // 是否显示实时在线统计对话框
      Visible: false,
      statisticalData: [],
      MouseEvent: {
        top: 0,
        left: 0,
        isShow: false
      },
      teamNumber: '',
      // 右键表格
      row: null,
      clickRowData: null,
      disabled1: false,
      disabled2: true,
      trackingValue: false,
      localtion: {}
    }
  },
  created () {
    this.getInfoList()
    this.getGroupingList()
    eventBus.$on('closeCover', val => this.Visible = val)
    eventBus.$on('urlParams', val => this.account = val)
  },
  methods: {
    // 获取人员信息列表
    async getInfoList () {
      let { data } = await this.$Http.get(`/DataListCompany/GetCleanerAllListApi?ClientNo=${this.$route.query.ClientNo}`)
      // 原始数据
      this.originalData = data
      data.forEach(item => {
        const obj = {}
        obj.NAME = item.NAME
        obj.WORKTYPE = item.WORKTYPE
        obj.LONGITUDE = item.LONGITUDE
        obj.LATITUDE = item.LATITUDE
        obj.ONLINE = item.ONLINE
        this.person_data.push(obj)
      })

      this.statusNums.outlines = 0
      this.statusNums.onlines = 0
      data.forEach(item => {
        if (item.ONLINE === 0) this.statusNums.outlines++
        if (item.ONLINE === 1) this.statusNums.onlines++
      })
      data = data.filter(item => {
        item.ORIENTATION_TIME = item.ORIENTATION_TIME.split('.')[0].replace('T', ' ')
        item.BIRTHDAY = item.BIRTHDAY.split('T')[0].replace('-', ' 年 ').replace('-', ' 月 ') + ' 日 '
        item.WORKDATE = item.WORKDATE.split('T')[0].replace('-', ' 年 ').replace('-', ' 月 ') + ' 日 '
        const timeDifference = ((new Date() - new Date(item.ORIENTATION_TIME)) / 1000) / 60
        if (timeDifference <= 3) return item
      })
      this.tableData = data
      eventBus.$emit('mapData1', this.statusNums)
      this.screenData()
    },
    // 获得分组列表
    async getGroupingList () {
      const { data } = await this.$Http.get(`/DataListCompany/GetCleanerGroupListApi?ClientNo=${this.$route.query.ClientNo}`)
      this.groupingList = data
      eventBus.$emit('warningGroup', data)
    },
    // 格式化单元格内容
    formatter (row, column, cellValue, index) {
      if (cellValue === 1) return '在线'
      if (cellValue === 0) return '离线'
    },
    // 查询人员列表
    query () {
      this.screenData()
    },
    // 自动查询
    switchChange () {
      this.selectChange()
    },
    selectChange (time = 5000) {
      let timeId = null
      if (this.switch_value) {
        timeId = setInterval(() => {
          this.screenData()
          if (!this.switch_value) clearInterval(timeId)
        }, time)
      }
    },
    // 分组
    groupingChange (val) {
    },
    // 筛选数据
    screenData () {
      let { name, mobile, groupingValue, statusValue, typeValue } = this.form
      if (statusValue === '在线') statusValue = 1
      if (statusValue === '离线') statusValue = 0
      if (name) {
        this.screeningData = this.originalData.filter(item => item.NAME.includes(name))
      } else {
        this.screeningData = this.originalData
      }
      if (mobile) this.screeningData = this.screeningData.filter(item => item.PHONE.includes(mobile))
      this.screeningData = this.screeningData.filter(item => item.CLIENT_NO.includes(groupingValue))
      if (statusValue !== '全部') this.screeningData = this.screeningData.filter(item => item.ONLINE === statusValue)
      if (typeValue !== '全部') this.screeningData = this.screeningData.filter(item => item.WORKTYPE === typeValue)

      this.statusNums.onlines = 0
      this.screeningData.forEach(item => {
        if (item.ONLINE === 1) this.statusNums.onlines++

      })
      eventBus.$emit('mapData2', this.screeningData)
    },
    // 实时在线统计
    async onlineStatistics () {
      this.Visible = true
      const { data } = await this.$Http.get(`/DataListCompany/GetWorkerStatisticsInfoApi?ClientNo=${this.$route.query.ClientNo}`)
      this.statisticalData = data
      eventBus.$emit('isCover', this.Visible)
    },
    // 关闭实时在线统计
    close () {
      this.Visible = false
      eventBus.$emit('isCover', this.Visible)
    },
    // 右键表格某一行
    rowHandle (row, column, event) {
      window.event.returnValue = false
      this.row = row
      this.MouseEvent.left = event.clientX
      this.MouseEvent.top = event.clientY - 160

      this.MouseEvent.isShow = true
      this.teamNumber = row.CLIENT_NO
    },
    // 显示班组区域
    groupArea (CLIENT_NO) {
      eventBus.$emit('showGroupArea', CLIENT_NO)
      this.MouseEvent.isShow = false
    },
    // 显示清扫队区域
    clearArea (CLIENT_NO) {
      eventBus.$emit('showClearArea', CLIENT_NO)
      this.MouseEvent.isShow = false
    },
    // 清除区域
    cleanArea () {
      eventBus.$emit('clearArea')
      this.MouseEvent.isShow = false
    },
    // 导出Excel
    exportExcel () {
      let excelName = ''
      if (!document.querySelector('.group li.selected span')) {
        excelName = '应县-人员信息'
      } else {
        excelName = document.querySelector('.group li.selected span').innerText + '-人员信息'
      }
      // const excelName = document.querySelector('.group li.selected span').innerText + '-人员信息'
      const tHeader = ['人员编号', '班组编号', '班组', '姓名', '电话', '生日', '性别', '工种', '入职时间', '最终定位时间', '经度', '纬度', '状态', '通讯卡号', '打卡状态']
      const filterVal = ['VID', 'CLIENT_NO', 'CLIENT_NAME', 'NAME', 'PHONE', 'BIRTHDAY', 'SEX', 'WORKTYPE', 'WORKDATE', 'ORIENTATION_TIME', 'LONGITUDE', 'LATITUDE', 'HEARTBEAT', 'ONLINE', 'SIMCARD_NO', 'date']
      export2Excel(tHeader, filterVal, this.screeningData, excelName)
    },
    // 点击表格某一行
    clickRow (row) {
      this.MouseEvent.isShow = false
      this.clickRowData = row
    },
    // 双击表格某一行
    dblClickRow (row) {
      eventBus.$emit('mapLocaltion', row)
    },
    // 右键导出Excel
    exportRowExcel () {
      this.MouseEvent.isShow = false
      const excelName = this.row.CLIENT_NAME + '-' + this.row.NAME + '-人员信息'
      const tHeader = ['人员编号', '班组编号', '班组', '姓名', '电话', '生日', '性别', '工种', '入职时间', '最终定位时间', '经度', '纬度', '状态', '通讯卡号', '打卡状态']
      const filterVal = ['VID', 'CLIENT_NO', 'CLIENT_NAME', 'NAME', 'PHONE', 'BIRTHDAY', 'SEX', 'WORKTYPE', 'WORKDATE', 'ORIENTATION_TIME', 'LONGITUDE', 'LATITUDE', 'HEARTBEAT', 'ONLINE', 'SIMCARD_NO', 'date']
      let ary = []
      ary.push(this.row)
      export2Excel(tHeader, filterVal, ary, excelName)
    },
    // 开始跟踪
    startTracking () {
      if (!this.clickRowData) {
        this.$message({
          message: '请先选择一位人员！',
          type: 'warning'
        })
        return false
      }
      this.clickRowData.isShow = true
      this.disabled1 = true
      this.disabled2 = false
      eventBus.$emit('Tracking', this.clickRowData)
      let timeId = null
      timeId = setInterval(() => {
        this.screenData()
        eventBus.$emit('Tracking', this.clickRowData)
        // console.log(11)
        if (this.trackingValue) clearInterval(timeId)
      }, 6000)
    },
    // 取消跟踪
    cancelTracking () {
      this.trackingValue = true
      this.disabled1 = false
      this.disabled2 = true
    },
    // 鼠标进入单元格显示其内容
    cellMouseEnter (row, column, cell, event) {
      cell.setAttribute('title', cell.innerText)
    },
    // 轨迹回放
    trajectory () {
      this.MouseEvent.isShow = false
      // 进入轨迹回放页面
      this.$router.push({ name: 'playback', params: { VID: this.row.VID } })
    }
  }
}
</script>

<style scoped lang="less">
.monitoring {
  height: 100%;
  // position: relative;
  .el-form {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-bottom: 2px solid #3baefa;
    .el-form-item {
      margin: 0;
      flex-shrink: 0;
      .el-input {
        height: 22px;
      }
    }
    .people_number {
      height: 40px;
      line-height: 40px;
      padding: 0 5px;
      color: #333;
      flex-shrink: 0;
      span {
        display: inline-block;
        padding: 0 2px;
        height: 30px;
        border-bottom: 1px solid #ccc;
        box-sizing: border-box;
        text-align: center;
      }
    }
    .switch {
      display: inline-block;
      min-width: 100px;
      height: 40px;
      line-height: 40px;
      margin-left: 10px;
      flex-shrink: 0;
      span {
        margin-right: 2px;
        cursor: default;
        color: #606266;
      }
      .el-select {
        max-width: 100px;
        height: 22px;
        margin-left: 5px;
        /deep/.el-input__suffix {
          top: 8px;
          line-height: 24px;
        }
      }
    }
    .el-button {
      flex-shrink: 0;
    }
  }
  .table_list {
    position: absolute;
    top: 62px;
    bottom: 0px;
    overflow-y: auto;
    width: 100%;
    .el-table {
      height: 100%;
    }
    /deep/.el-table__body-wrapper {
      height: calc(~"100% - 34px");
      overflow-y: auto;
    }
  }
}
.row_box {
  width: 120px;
  // height: 130px;
  color: #666;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  position: fixed;
  span {
    display: block;
    text-align: center;
    line-height: 26px;
    cursor: default;
    &:hover {
      color: #fff;
      background-color: #409eff;
    }
  }
}
.statistical {
  width: 600px;
  min-height: 390px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  .title {
    height: 40px;
    display: flex;
    align-items: center;
    border-bottom: 2px solid #ccc;
    padding-left: 5px;
    box-sizing: border-box;
    h3 {
      color: #666;
    }
    span {
      margin-left: 450px;
    }
  }
  .statistical_content {
    min-height: 310px;
    padding: 0 20px;
    background-color: #f3f3f3;
    overflow-y: auto;
  }
  .statistical_time {
    height: 40px;
    line-height: 40px;
    padding-left: 20px;
    color: #666;
    background-color: #f3f3f3;
  }
}
</style>
